<template>
	<view class="">
		<view class="map">
			<!-- 地图组件 -->
			<map style="width: 100%;height: 60%;z-index: 0;" :latitude="latitude" :longitude="longitude" :markers="markers"
				@markertap='markersClick'></map>
			<index :data='markersList' style="width: 100%;height: 40%;z-index: 999;"></index>
		</view>

	</view>
</template>

<script>
import index from './index/index.vue';
import axios from "axios"
import indexApi from "@/api/index.js"

export default {
	components: {
		index
	},
	onLoad() {
		// 在组件创建时获取位置信息
		this.getLocation();
	},
	data() {
		// 组件的数据
		return {
			callout: '',
			markers: [], // 地图上的标记点
			longitude: 118.175393, // 经度
			latitude: 39.635113, // 纬度,
			show: false,
			markersList: [],
			data: [],
			num: 0,
			iconPath: '',
			clickedMarkerId: '',
			clickedMarkerIcon: ''
		}
	},
	mounted() {

	},
	onPageScroll(res) {

	},

	methods: {
		close() {
			this.show = false
		},
		async markersClick(e) {
			this.latitude = e.target.latitude;
			this.longitude = e.target.longitude;

			// 恢复之前点击的点的颜色
			if (this.clickedMarkerId !== null) {
				const previousMarker = this.markers.find(item => item.id === this.clickedMarkerId);
				if (previousMarker) {
					previousMarker.iconPath = this.clickedMarkerIcon;

				}
			}
			// 获取当前点击的点的设备信息
			const currentMarker = this.markers.find(item => item.id === e.target.markerId);
			console.log(currentMarker);
			//存下点击的iconPath
			this.clickedMarkerIcon = currentMarker.iconPath;

			currentMarker.iconPath = '../../static/icon-font/locationClick.png';

			const markerData = await indexApi.getDevice({
				deviceId: currentMarker.deviceId
			});
			this.markersList = markerData.data.rows[0];
			this.show = true;

			// 将当前点击的点的ID保存起来
			this.clickedMarkerId = e.target.markerId;
		},

		// 获取当前位置信息
		async getLocation() {
			indexApi.getMap({
				status: '3'
			}).then(res => {
				this.data = res.data.data
				this.data.map(item => {
					if (item.statusLable === '在线') {
						this.iconPath = '../../static/icon-font/location.png'
					} else {
						this.iconPath = '../../static/icon-font/locationoff.png'
					}
					const axin = {
						id: this.num++,
						latitude: item.latitude,
						longitude: item.longitude,
						width: 30,
						height: 30,
						title: '当前位置',
						deviceId: item.deviceId,
						iconPath: this.iconPath,
					}
					return this.markers.push(axin)
				})
			})

		}
	}
}
</script>

<style>
.map
{
	width: 100%;
	height: 100vh;
}

.search
{
	margin-top: 80rpx;
}
</style>